<script setup lang="ts">
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

const target = ref<null | HTMLImageElement>(null)

// 需求 : 图片进入视口再加载资源

// useIntersectionObserver()
// 需要两个参数
//参数1：监听的元素
//参数2：回调函数该函数有两个参数；参数1是数数组，参数2就是绑定的元素（没用）
//重点关注：数组中下标为e的对象中的属性isInterSection false不在视口中 true在视口中

const { stop } = useIntersectionObserver(target, ([{ isIntersecting }], observerElement) => {
    // console.log(isIntersecting);
    if (isIntersecting) {
        console.log("进入了视口区")
        target.value!.src = "https://img2.baidu.com/it/u=1948495721,2336867133&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"
        stop()
    }
})
</script>

<template>
    <div class="box"></div>
    <img src="" alt="" ref="target">
</template>

<style scoped>
.box {
    height: 2000px;
}
</style>